<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>社员列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
</head>
<body>
<!--搜索框-->
<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">筛选数据</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="title" id="memReload" autocomplete="off" placeholder="请输入查询条件" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <select  id="sexSearch" lay-search="">
                    <option value="">选择性别</option>
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select  id="statusSearch" lay-search="">
                    <option value="">选择状态</option>
                    <option value="0">待审核</option>
                    <option value="1">通过</option>
                    <option value="2">驳回</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属社团</label>
            <div class="layui-input-inline" lay-filter="group">
                <select id="comSelect"  lay-search="">

                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属班级</label>
            <div class="layui-input-inline" lay-filter="group">
                <select id="classSelect"  lay-search="">

                </select>
            </div>
        </div>
        <div class="layui-inline" id="headerContent">
            <button type="button" class="layui-btn" data-type="reload">查询</button>
            <button type="button" class="layui-btn" data-method="addMember">添加社团成员</button>
        </div>
    </div>
</form>
<table id="memList" lay-filter="memList" ></table>
<!--添加社团成员页面-->
<div id="addMemberDiv" style="display: none;">
    <form class="layui-form layui-form-pane" id="memadd" lay-filter="memadd">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" placeholder="请输入姓名" lay-verify="required"
                       lay-reqtext="姓名必填" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">名字不能为空</div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属社团</label>
            <div class="layui-input-inline">
                <input type="hidden" name="comId" readonly id="addMemComId"
                        class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="comName" readonly id="addMemComName"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属班级</label>
            <div class="layui-input-inline">
                <select lay-verify="required" id="yxadd" lay-filter="yxadd" lay-search="">
                    <option value="">请选择院系</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="classId" lay-verify="required" id="bjadd" lay-filter="bjadd" lay-search="">
                    <option value="">请选择班级</option>
                </select>
                <input type="hidden" name="className" id="className">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="男" checked="">
                <input type="radio" name="sex" value="1" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <input type="radio" name="role" value="1" title="社团成员" checked="">
                <input type="radio" name="role" value="2" title="后台用户" disabled>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">爱好</label>
            <div class="layui-input-inline">
                <input type="text" name="hobby" placeholder="请输入爱好"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-inline">
                    <input type="tel" name="telephone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-inline">
                <input type="text" name="birth" lay-verify="date"  autocomplete="off" id="date"  class="layui-input">
            </div>
        </div>

    </form>
</div>
<!--修改社团成员页面-->
<div id="modifyMemberDiv" style="display: none;">
    <form class="layui-form layui-form-pane" id="memModify" lay-filter="memModify">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" placeholder="请输入姓名" lay-verify="required"
                       lay-reqtext="姓名必填" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">名字不能为空</div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属社团</label>
            <div class="layui-input-inline">
                <input type="hidden" name="comId" id="modifyMemComId" readonly
                       class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="comName" id="modifyMemComName" readonly
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属班级</label>
            <div class="layui-input-inline">
                <select id="yxmodify" lay-verify="required" lay-filter="yxmodify" lay-search="">
                    <option value="">请选择院系</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="classId" id="bjmodify" lay-verify="required" lay-filter="bjmodify" lay-search="">
                </select>
                <input type="hidden" name="className" id="classNameM">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="男" checked="">
                <input type="radio" name="sex" value="1" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <input type="radio" name="role" value="1" title="社团成员" checked="">
                <input type="radio" name="role" value="2" title="后台用户" disabled>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">爱好</label>
            <div class="layui-input-inline">
                <input type="text" name="hobby" placeholder="请输入爱好"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-inline">
                    <input type="tel" name="telephone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-inline">
                <input type="text" name="birth" lay-verify="date"  autocomplete="off" id="dates"  class="layui-input">
            </div>
        </div>
    </form>
</div>
<div id="showReasons" style="display: none">
    <div class="layui-input-inline" style="width: 100%;height: 100%;">
        <textarea readonly id="rReason" name="rejectReason" class="layui-textarea"></textarea>
    </div>
</div>
</body>
<script type="text/html" id="comBar">
    {{#  if(d.status == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="delete">移出社团</a>
    {{#  } }}
    {{#  if(d.status != 0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
    {{#  } }}
    {{#  if(d.status == 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="checkOnce">提交审核</a>
    <a class="layui-btn layui-btn-xs" lay-event="seeReason" >驳回理由</a>
    {{#  } }}
</script>


<script src="../lib/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['table','form','layer','jquery','laydate'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var laydate = layui.laydate;

        //加载社团筛选数据
        $.ajax({
            type:'get',
            url:'/communityList',
            dataType:'json',
            success:function (res) {
                if (res.state == true){
                    var dataList = res.data;
                    $("#comSelect").html("");
                    var option = "<option value=''>请选择社团</option>";
                    for (var i = 0; i < dataList.length; i++) {
                        option += "<option value='"+dataList[i].id+"'>"+dataList[i].name+"</option>";
                    }
                    $("#comSelect").html(option);
                    form.render();
                } else {
                    layer.msg(res.msg,{icon:3})
                }
            }
        });
        //加载班级列表
        $.ajax({
            type:'get',
            url:'/classList?isFaculty=false',
            dataType:'json',
            success:function (res) {
                if (res.state == true){
                    var dataList = res.data;
                    $("#classSelect").html("");
                    var option = "<option value=''>请选择班级</option>";
                    for (var i = 0; i < dataList.length; i++) {
                        option += "<option value='"+dataList[i].id+"'>"+dataList[i].name+"</option>";
                    }
                    $("#classSelect").html(option);
                    form.render();
                } else {
                    layer.msg(res.msg,{icon:3})
                }
            }
        });

        //获取社团数据
        table.render({
            elem: '#memList'
            ,height: 440
            ,url: '/user?isSingle=true' //数据接口
            ,request:{
                pageName: 'pageNumber' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,response: {
                countName: 'total'
            }
            ,page: true //开启分页
            ,totalRow:true
            ,cellMinWidth: 70
            ,even:true
            ,skin:'line'
            ,limit: 10
            ,cols: [[ //表头
                {field: 'id', hide:'true'}
                ,{field: 'name', title: '姓名',align:'center'}
                ,{field: 'sex', title: '性别', align:'center',templet:'#sex'}
                ,{field: 'hobby', title: '爱好' ,align:'center',templet:'#hobby'}
                ,{field: 'className', title: '班级', align:'center'}
                ,{field: 'comName', title: '社团', align:'center'}
                ,{field: 'telephone', title: '手机号码',align:'center'}
                ,{field: 'email', title: '邮箱', align:'center'}
                // ,{field: 'rejectReason', title: '驳回理由', align:'center'}
                ,{field: 'status', title: '状态', sort: true,align:'center',templet:'#status'}
                ,{title:'操作',toolbar:'#comBar',width:240}
            ]],
            id:'memTable'
        });
        //监听工具条
        table.on('tool(memList)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'delete'){ //删除
                layer.confirm('是否将'+data.name+'移出社团',{icon: 3, title:'提示：此操作不可逆'}, function(index){
                    obj.del();
                    //发送服务端
                    var rowData = JSON.stringify(data);
                    $.ajax({
                        url:'/user',
                        type:'put',
                        data:rowData,
                        dataType:'json',
                        contentType:'application/json',
                        success:function (res) {
                            if (res.state == true) {//禁用成功
                                layer.msg('移出成功', {icon:1,time:1000},function(){
                                    setTimeout('window.location.reload()',200);
                                });
                            }else {//禁用失败
                                layer.msg('移出失败', {icon:3,time:1000},function(){
                                    setTimeout('window.location.reload()',1000);
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if(layEvent === 'update'){ //编辑
                //加载所属社团为当前登录用户的社团名称和社团id
                $.ajax({
                    url:'/class/'+data.classId,
                    type:'get',
                    dataType:'json',
                    success:function (res) {
                        if (res.state == true){
                            //成功获取班级列表，改变班级的值
                            $("#bjmodify").html("");
                            var option = "";
                            if (res.data != null) {
                                option +="<option value='"+res.data.id+"'>"+res.data.name+"</option>";
                            }
                            if (option == "") {
                                option +="<option value=''></option>";
                            }
                            $("#bjmodify").append(option);
                            form.render();
                        }else {
                            layer.msg(res.msg,{icon:3});
                        }
                    }
                });
                //数据回显
                var data = obj.data;
                //回显数据
                form.val("memModify",{
                    "id":data.id,
                    "name":data.name,
                    "comId":data.comId,
                    "comName":data.comName,
                    "classId":data.classId,
                    // "className":data.className,
                    "hobby":data.hobby,
                    "sex":data.sex,
                    "telephone":data.telephone,
                    "email":data.email,
                    "birth":data.birth
                });
                //加载院系
                $.ajax({
                    type:'get',
                    url:'/classList?isFaculty=true',
                    dataType:'json',
                    success:function (res) {
                        if (res.state == true){
                            //获取数据成功
                            var option = "<option value=''>所在院系</option>";
                            $("#yxmodify").html("");
                            for(var i=0;i<res.data.length;i++){
                                option +="<option value='"+res.data[i].faculty+"'>"+res.data[i].faculty+"</option>";
                            }
                            $("#yxmodify").append(option);
                            form.render();
                        } else {
                            layer.msg(res.msg);
                        }
                    }
                });
                //联动院系
                form.on('select(yxmodify)', function(data){
                    $.ajax({
                        url:'/classByFaculty',
                        type:'get',
                        dataType:'json',
                        data:'faculty='+data.value,
                        success:function (res) {
                            if (res.state == true){
                                //成功获取班级列表，改变班级的值
                                var option = "<option value=''>请选择对应班级</option>";
                                $("#bjmodify").html("");
                                for(var i=0;i<res.data.length;i++){
                                    if (res.data[i].name != null){
                                        option +="<option value='"+res.data[i].id+"'>"+res.data[i].name+"</option>";
                                    }
                                }
                                $("#bjmodify").append(option);
                                form.render();
                            }else {
                                layer.msg(res.msg,{icon:3});
                            }
                        }
                    });
                });
                //监听班级的选中，给隐藏的班级名称赋值
                form.on('select(bjmodify)', function(data){
                    $.ajax({
                        url:'/class/'+data.value,
                        type:'get',
                        dataType:'json',
                        success:function (res) {
                            if (res.state == true){
                                $("#classNameM").val(res.data.name);
                            } else {
                                layer.msg(res.msg,{icon:3});
                            }
                        }
                    });
                });
                form.render();


                layer.open({
                    type: 1,
                    title:["修改社团成员信息", 'font-size:14px; font-weight: 700;'],
                    btn:['确认修改','取消修改'],
                    btnAlign: 'c',
                    content: $('#modifyMemberDiv'),
                    area: ['700px','500px'],
                    closeBtn:2,
                    yes: function(index, layero){
                        var comData = $("#memModify").serialize();
                        $.ajax({
                            type:'post',
                            url:'/user',
                            data:comData,
                            dataType:'json',
                            success:function (res) {
                                if (res.state == true){
                                    layer.msg('修改成功', {icon:1,time:1000},function(){
                                        //关闭弹框
                                        layer.load(2);
                                        layer.close(index);
                                        setTimeout('window.location.reload()',500);
                                    });
                                }else {
                                    layer.msg(res.msg, {icon:3,time:1000});
                                }
                            }
                        });
                    },
                    btn2:function (index,layero) {
                        //取消修改，关闭弹框
                        layer.close(index);
                    }
                });
            } else if(layEvent === 'checkOnce'){ //发起再次审核
                layer.confirm('确认已经核对好相关信息？',{icon: 3, title:'提示：此操作不可逆'}, function(index){
                    obj.del();
                    //发送服务端
                    data.status = '0';
                    data.rejectReason = "";
                    $.ajax({
                        url:'/user',
                        type:'post',
                        data:"id="+data.id+"&status="+data.status+"&rejectReason="+data.rejectReason,
                        dataType:'json',
                        success:function (res) {
                            if (res.state == true) {//
                                layer.msg('申请成功，请您耐心等待', {icon:1,time:1000},function(){
                                    setTimeout('window.location.reload()',200);
                                });
                            }else {//禁用失败
                                layer.msg(res.msg, {icon:3,time:1000},function(){
                                    setTimeout('window.location.reload()',1000);
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if(layEvent === 'seeReason'){ //查看驳回理由
                $('#rReason').val(data.rejectReason);
                layer.open({
                    type: 1,
                    title:["驳回理由", 'font-size:14px; font-weight: 700;'],
                    btnAlign: 'c',
                    content: $('#showReasons'),
                    area: ['400px','150px'],
                    closeBtn:2
                });
            }
        });
        //添加社团弹框
        var active = {
            addMember: function () {//添加社团操作
                //加载所属社团为当前登录用户的社团名称和社团id
                $("#addMemComId").val(localStorage.getItem('comId'));
                $("#addMemComName").val(localStorage.getItem('comName'));
                //加载院系
                $.ajax({
                    type:'get',
                    url:'/classList?isFaculty=true',
                    dataType:'json',
                    success:function (res) {
                        if (res.state == true){
                            //获取数据成功
                            var option = "<option value=''>所在院系</option>";
                            $("#yxadd").html("");
                            for(var i=0;i<res.data.length;i++){
                                option +="<option value='"+res.data[i].faculty+"'>"+res.data[i].faculty+"</option>";
                            }
                            $("#yxadd").append(option);
                            form.render();
                        } else {
                            layer.msg(res.msg);
                        }
                    }
                });
                //联动院系
                form.on('select(yxadd)', function(data){
                    $.ajax({
                        url:'/classByFaculty',
                        type:'get',
                        dataType:'json',
                        data:'faculty='+data.value,
                        success:function (res) {
                            if (res.state == true){
                                //成功获取班级列表，改变班级的值
                                var option = "<option value=''>请选择对应班级</option>";
                                $("#bjadd").html("");
                                for(var i=0;i<res.data.length;i++){
                                    if (res.data[i].name != null){
                                        option +="<option value='"+res.data[i].id+"'>"+res.data[i].name+"</option>";
                                    }
                                }
                                $("#bjadd").append(option);
                                form.render();
                            }else {
                                layer.msg(res.msg,{icon:3});
                            }
                        }
                    });
                });
                //监听班级的选中，给隐藏的班级名称赋值
                form.on('select(bjadd)', function(data){
                    $.ajax({
                        url:'/class/'+data.value,
                        type:'get',
                        dataType:'json',
                        success:function (res) {
                            if (res.state == true){
                                $("#className").val(res.data.name);
                            } else {
                                layer.msg(res.msg,{icon:3});
                            }
                        }
                    });
                });

                layer.open({
                    type: 1,
                    title:["添加社团成员", 'font-size:14px; font-weight: 700;'],
                    btn:['确认添加','取消添加'],
                    btnAlign: 'c',
                    content: $('#addMemberDiv'),
                    area: ['700px','500px'],
                    closeBtn:2,
                    yes: function(index, layero){
                        var comData = $("#memadd").serialize();
                        $.ajax({
                            type:'post',
                            url:'/user',
                            data:comData,
                            dataType:'json',
                            success:function (res) {
                                if (res.state == true){
                                    layer.msg('添加成功', {icon:1,time:1000},function(){
                                        //关闭弹框
                                        layer.load(2);
                                        layer.close(index);
                                        setTimeout('window.location.reload()',500);
                                    });
                                }else {
                                    layer.msg(res.msg, {icon:3,time:1000});
                                }
                            }
                        });
                    },
                    btn2:function (index,layero) {
                        //取消修改，关闭弹框
                        layer.close(index);
                    }
                });
            },
            reload: function(){
                var memReload = $('#memReload'); //获取输入框的id
                var sex = $('#sexSearch');
                var statue = $('#statusSearch');
                var comSelect = $('#comSelect');
                var classSelect = $('#classSelect');
                //执行重载
                table.reload('memTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        searchKey: memReload.val(),
                        isSingle:true,
                        sex: sex.val(),
                        status: statue.val(),
                        comId: comSelect.val(),
                        classId: classSelect.val()
                    }
                }, 'data');
            }
        }

        $('#headerContent .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        $('#headerContent .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //日期
        laydate.render({
            elem: '#dates'
        });
        //日期
        laydate.render({
            elem: '#date'
        });
    });
</script>

<script type="text/html" id="status">
    {{#  if(d.status == 0){ }}
    待审核
    {{#  } else if(d.status == 1 ) { }}
    已加入
    {{#  }else if(d.status == 2 ) { }}
    驳回
    {{#  }
    }}
</script>
<script type="text/html" id="sex">
    {{#  if(d.sex == 0){ }}
    男
    {{#  } else if(d.sex == 1 ) { }}
    女
    {{#  }else { }}
    未知
    {{#  }
    }}
</script>


</html>